
import React, { useEffect, useState } from "react"

import { Toast } from "antd-mobile/2x"
import BeScroll from "../../components/loading/index"
import NavHeaader from "../../components/NavHeader/index"
import ListItem from '../../components/ListItem/index';
import api from "../../api/index";
import { getCurrentCity } from '../../api/city';
//正常的引入css
import "./index.css"
//模块化的形式来引入css
import styles from "./index.module.css"



const BMap = window.BMap;
//地图的实例化对象;
let map = null;
const labelStyle = {
    cursor: 'pointer',
    border: '1px solid rgb(255,0,0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rgb(255,255,255)',
    textAlign: 'center'
}
const Map = () => {
    // 创建出来弹窗的列表状态;
    const [list, setList] = useState([]);
    // 弹框显示与否的状态;
    const [Loaded, setLoaded] = useState(false);

    //实例化地图对象;
    useEffect(() => {
        initMap()
    }, [])
    const initMap = async () => {
        const { label, value } = await getCurrentCity();
        //实例化地图对象;
        map = new BMap.Map("container");
        // 创建地址解析器实例     
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野    
        //1:详细的地址 
        //2:回调函数----回调函数的形参就是要表示解析出来的坐标;
        myGeo.getPoint(label, async (point) => {
            //需要设置重心点坐标，设置层级;  
            map.centerAndZoom(point, 11);
            //添加控件---平移缩放的
            map.addControl(new BMap.NavigationControl());
            //添加比例尺的控件;
            map.addControl(new BMap.ScaleControl());
            //专门定义一个方法来添加覆盖物;
            renderOverLays(value);
        },
            label);
        /**
         * 添加覆盖物的处理逻辑;
         * 获取房源数据
         * 遍历这个数据-----创建覆盖物，需要给每一个覆盖物来一个唯一标识;
         * 给覆盖物一个点击时间间;
         * 在点击事件里面----获取当前点击的那个唯一标识,-----就知道点击的是哪个区域;
         * ---并把地图方法;---13---调用clearOverlays---清楚当前的覆盖物;
         */
        //地图移动关闭弹框
        map.addEventListener("movestart", () => {
            setLoaded(false)
        })
    }
    const renderOverLays = async (id) => {
        Toast.show({
            content: "加载中",
            duration: 0
        });
        //覆盖物的多少，根据请求接口的返回的数量;
        const res = await api.getAreaMap({ id })
        console.log(res)
        Toast.clear();
        //定义一个方法，专门用来处理需要渲染的地图的层级以及覆盖物的类型;
        const { type, nextLevel } = getTypeAndZoom()

        res.body.forEach(item => {
            createOverlays(type, nextLevel, item)
        })
    }

    const getTypeAndZoom = () => {
        //计算一下返回值覆盖物的类型和缩放级别;
        //区  ---- 11;
        //镇 -----13;
        //小区-----15;
        //获取当前地图的缩放级别;
        const curZoom = map.getZoom();
        let type, nextLevel;
        if (curZoom >= 10 && curZoom < 12) {
            type = "cicle";
            nextLevel = 13;
        } else if (curZoom >= 12 && curZoom < 14) {
            type = "cicle";
            nextLevel = 15;
        } else if (curZoom >= 14 && curZoom < 16) {
            type = "rect";
        }
        return {
            type,
            nextLevel
        }
    }
    const createOverlays = (type, nextLevel, item) => {
        const { coord: {
            latitude,
            longitude
        },
            label,
            value,
            count
        } = item;
        //创建中心点坐标;
        var point = new BMap.Point(longitude, latitude);
        if (type === "rect") {
            createRect(point, label, count, value);
        } else {
            createCircle(point, label, count, value, nextLevel)
        }
    }

    //创建圆形覆盖物的方法;
    const createCircle = (point, areaName, count, id, nextLevel) => {
        const opts = {
            //坐标;
            position: point,
            //偏移
            offset: new BMap.Size(-35, -35)
        }
        // 创建文本标注对象
        /**
         * 第一个参数----表示覆盖物的文字
         * 如果---setcontent方法--0--就不回生效了----写空字符串;
         * 第二个参数------表示覆盖物的配置对象;
         */
        const label = new BMap.Label('', opts);
        label.setContent(`
        <div class="${styles.bubble}">
          <p class="${styles.name}">
             ${areaName}
          </p>
          <p>
            ${count}套
          </p>
        </div>
     `)
        //设置样式;
        label.setStyle(labelStyle);
        //覆盖物身上添加一个点击事件;
        label.addEventListener("click", () => {
            //获取覆盖物下级的数据;
            renderOverLays(id);
            //放大地图;
            map.centerAndZoom(point, nextLevel);
            //清除掉之前的覆盖物;
            setTimeout(() => {
                map.clearOverlays()
            }, 0)
        })
        //把写好的覆盖物给添加到地图中;
        map.addOverlay(label);
    }
    //创建小区的覆盖物
    const createRect = (point, areaName, count, id) => {
        const opts = {
            //坐标;
            position: point,
            //偏移
            offset: new BMap.Size(-50, -28)
        }
        const label = new BMap.Label('', opts);
        label.setContent(`
        <div class="${styles.rect}">
           <span class="${styles.housename}">${areaName}</span>
           <span class="${styles.housenum}">${count}套</span>
        </div>
     `)
        //设置样式
        label.setStyle(labelStyle);
        //添加点击事件;
        label.addEventListener("click", (e) => {
            const { clientX, clientY } = e.changedTouches[0];
            //让地图移动一下;
            const x = (window.innerWidth) / 2 - clientX;
            const y = (window.innerHeight) / 2 - clientY;
            //获取小区房屋列表的方法;
            getCommitHouse(id);
            //位移;
            map.panBy(x, y);
        })
        map.addOverlay(label);
    }
    const getCommitHouse = async (id) => {
        Toast.show({
            content: "加载中",
            duration: 0
        });
        //获取这个小区下面的房源数据;
        const res = await api.getRoomList({
            cityId: id
        })
        console.log(res)
        Toast.clear();
        setList(res.body.list);
        setLoaded(true)
    }
    const renderHouseList = () => {
        return list.length > 0 && list.map(item => {
            console.log(item);
            return <ListItem key={item.houseCode}
                {...item} onClick={() => {
                    console.log(1);
                }}
            ></ListItem>
        })
    }
    return (
        <div className="map">
            <NavHeaader>地图找房</NavHeaader>
            <div id="container">

            </div>
            <div className={[styles.houseList, Loaded ? styles.show : ''].join(' ')}>
                <div className={styles.titleWrap}>
                    <h1 className={styles.listTitle}>
                        房屋列表
                    </h1>
                    <a className={styles.titleMore}
                        href="/houst/list"
                    >
                        更多房源
                    </a>
                </div>

                <div className={styles.houseItems}> <BeScroll myClass="mapRoom" >
                    <div>
                        {
                            renderHouseList()
                        }
                    </div>

                </BeScroll>
                </div>
            </div>
        </div>
    )

}

export default Map